<script setup lang="ts">
  import { Row as ARow, Col as ACol} from 'ant-design-vue'
  import { reactive} from 'vue'

  const user = reactive({
    name: 'dfs',
    No: '20211148',
    sex: '女',
    entryDate: '2021-11-12',
    phone: '15052331976',
    org: '总经办',
    email: '2342424@163.com',
    post: '总经办助理',
  })

</script>

<template>
  <div class="user-info">
    <a-row type="flex" justify="center" :gutter="[10,10]">
      <a-col :span="12">
        <a-row :gutter="[10,10]">
          <a-col :span="8" class="label">姓名：</a-col>
          <a-col :span="16"><a-input v-model:value="user.name" :disabled="true"></a-input></a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row :gutter="[10,10]">
          <a-col :span="8" class="label">员工工号：</a-col>
          <a-col :span="16"><a-input v-model:value="user.No" :disabled="true"></a-input></a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row :gutter="[10,10]">
          <a-col :span="8" class="label">性别：</a-col>
          <a-col :span="16"><a-input v-model:value="user.sex" :disabled="true"></a-input></a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row :gutter="[10,10]">
          <a-col :span="8" class="label">入职日期：</a-col>
          <a-col :span="16"><a-input v-model:value="user.entryDate" :disabled="true"></a-input></a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row :gutter="[10,10]">
          <a-col :span="8" class="label">手机：</a-col>
          <a-col :span="16"><a-input v-model:value="user.phone"></a-input></a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row :gutter="[10,10]">
          <a-col :span="8" class="label">所属组织：</a-col>
          <a-col :span="16"><a-input v-model:value="user.org" :disabled="true"></a-input></a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row :gutter="[10,10]">
          <a-col :span="8" class="label">邮箱：</a-col>
          <a-col :span="16"><a-input v-model:value="user.email" :disabled="true"></a-input></a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row :gutter="[10,10]">
          <a-col :span="8" class="label">岗位名称：</a-col>
          <a-col :span="16"><a-input v-model:value="user.post" :disabled="true"></a-input></a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-row>
      <a-button style="margin: 0 auto;margin-top: 40px;" type="primary">保存</a-button>
    </a-row>
  </div>
</template>

<style lang="less">
  .user-info {
    width: 800px;
    margin: 0 auto;
    .label {
      font-weight: bold;
      text-align: right;
    }
    .ant-input.ant-input-disabled {
      border: none;
    }
  }
</style>